<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width,maximum-scale=1.0" />
<title>译库网页翻译插件</title>

<style type="text/css">a {cursor:pointer;}
body,div,ul,li,p,a,span,b,strong,em,i,img {
  margin: 0px;
  padding: 0px;
  font: 12px Microsoft Yahei, "微软雅黑", Arial, Helvetica, sans-serif;
  color: #666666;
}
img {
  border: 0px;
}
.content,.content2 {
  height:26px;
  line-height:26px;
  background-color: #26c57a ;
  color: #fff;
  border-radius: 4px; 
  margin-left:20px;
  cursor:pointer;
}
.content:hover{
	background-color: #3edd93;
}
.content2:hover{
	background-color: #3edd93;
}
#percent_id{color: rgb(37, 196, 122);}
.content,.content2{display:inline-block}
/*.content2 {margin-right:20px}*/
ul,li {
  list-style: none;
}
#op_select_word{
	width: 71px;
  text-align: center;
}
#show_source_button{
	width: 71px;
  text-align: center;
}
#show_button{
    width: 43px;
    text-align: center;
}
a,a:hover {
  text-decoration: none;
}

.clearfix:after {
  display: block;
  clear: both;
  content: "";
  visibility: hidden;
  height: 0
}

.clearfix {
  zoom: 1
}
#sour_spn{
	margin-right: 12px;
}
.w1000 {
  width: 1200px;
  margin: 0px auto;
  overflow: hidden;
  clear: both;
}

.fl {
  float: left;
}

.strans {
  height: 40px;
}

.s_warp {
  background: #fff;
  width: 100%;
  height: 40px;
  color: #666666;
  position: fixed;
}

.s_warp .w1000 {
  /*position: relative;*/
}

.s_warp .logo {
  /*position: absolute;
  top: 3px;
  left: 0px;*/
 	margin-top: 9px;
 	float: left;
}

.s_warp .s_ltxt {
  position: absolute;
  top: 13px;
  left: 29px;
}

.s_warp .s_ltxt a {
  display: block;
  line-height: 23px;
  font-size: 14px;
  color: #ffffff;
}

.s_warp .s_speed {
  position: absolute;
  top: 11px;
  left: 200px;
}

.s_warp .s_speed span {
  display: block;
  line-height: 27px;
  margin-right: 6px;
}

.s_warp .s_speed .ss_bar {
  background: url(images/sbar0.png) repeat-x 0 center;
  width: 345px;
  height: 27px;
}

.s_warp .s_speed .ss_bar .ssb_been {
  background: url(images/sbar1.png) repeat-x 0 center;
  width: 45px;
  height: 27px;
  text-align: right;
}

.s_warp .s_lang {
  /*position: absolute;
  top: 6px;
  padding-left: 397px;*/
  margin-top: 6px;
  float: left;
}
#msgContent{
	padding-left: 280px;
}
.content{
	margin-left: 0;
}
.s_lang .sl_source {
  margin-right: 16px;
}
/*.sl_source {
   padding-left:80px
}*/
.s_warp .s_lang select {
  height:28px;
  width:61px;
  line-height: 20px;
  border: 1px solid #26c57a;
  border-radius: 2px;
  color:#26c57a;
  outline: none;
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    -ms-appearance: none;
    padding-left: 12px;
    background:url(images/select_jt.jpg) no-repeat scroll 42px center;
}
#tar_spn{margin-right: 5px;}
#show_source_button{margin-left: 0;}
.s_lang .sl_elang {
  padding: 7px;
  cursor: pointer;
}

.s_lang .sl_elang img {
  float: left;
}

/*.s_lang .sl_btn {
  padding: 0px 6px;
}*/

/*.s_lang .sl_btn button {
  background: #ffffff;
  height: 22px;
  line-height: 22px;
  padding: 0px 10px;
  border: 0px;
  border-radius: 10px;
  cursor: pointer;
}
.s_speed .sl_btn button {
  background: #ffffff;
  height: 22px;
  line-height: 22px;
  padding: 0px 10px;
  border: 0px;
  border-radius: 10px;
  cursor: pointer;
}*/

.s_warp .s_link {
  /*position: absolute;
  right: 0px;
  height:40px*/
  float: right;
}
.s_link img {
 vertical-align:middle;
}
.s_warp .s_link a {
  display: inline-block;
  height: 40px;
  line-height: 40px;
  margin-left: 17px;
  color: #999999;
}
#person_trans_id{
	margin-left: 160px;
}
.sl_duba{
  padding:0 30px;
  background: url("images/duba.png") no-repeat 0 center;
}
.s_link .closePlu{
  width:12px;
  height:12px;
  position:absolute;
  right:30px;
  top:5px;
  background: url("images/close_1.png") no-repeat;
}
.s_link .closePlu:hover{
  background: url("images/close_2.png") no-repeat;
}
#translating_id img{
	width: 20px;
	height: 4px;
}
.s_close{position:absolute;top:0;right:0;}
.s_close a{display:block;background: url("images/close.png") no-repeat right 0;width:18px;height:18px;cursor:pointer;}

.stransfixed{position:fixed;right:0px;top:200px;z-index:9999999;}
.stransfixed a{display:block;background:#0093d5 url(images/logofix31.png) no-repeat 11px center;width:40px;height:40px;border-radius:27px;margin-right:16px;}
.stransfixed a span{display:none;padding:22px 10px 0px 58px;font-size:14px;color:#ffffff;}
.stransfixed a:hover{background-position:20px center;border-radius:27px 0 0 27px;width:auto;margin-right:0px;}
.stransfixed a:hover span{display:block;}
/*#logo_id {margin-left:77px;}*/
</style>

<script type="text/javascript" src="lib/jquery.min.js"></script>

</head>

<body>
<div class="stransfixed"><a><span>译库网页翻译</span></a></div>
  <div class="strans">
    <div class="s_warp">
      <div class="w1000">
        <div class="logo">
          <a target="_blank"  id="logo_id"><img src="images/logo1.png"></a>
        </div>
        <div id="msgContent" class="s_lang clearfix" style="display:none;">
          <!-- 源语言 -->
          <div class="fl sl_source">
          <!-- 自动弹出时显示 当前 -->
            <span id="sour_spn" style="width:24px;">当前</span>
            <select id="sourceLang">
               <option value="en">英文</option>
              <option value="zh">中文</option>
              <option value="ru">俄语</option>
              <option value="pt">葡语</option>
              <option value="fr">法语</option>
            </select>
          </div>
          <!-- 目标语言 -->
          <div class="fl sl_target">

          <!-- 箭头标识 自动弹出时替换为：网页,是否翻译为-->
            <span id="tar_spn"><img src="images/zhuanhua.png"></span>
            
            <select id="targetLang">
              <option value="zh">中文</option>
              <option value="en">英文</option>
              <option value="ru">俄语</option>
              <option value="pt">葡语</option>
              <option value="fr">法语</option>
            </select>
            <span id="is_trans"></span>
          </div>
         
          <div id="trans_div" class="fl sl_btn">
            
            <button id="no_trans_btn" style="display: none;">暂不翻译</button>
            
          </div>
          <div>
          
          </div>
          <div>
          
          </div>
        </div>
        
        <div class="s_link" id="s_link_div_id" style="height: 40px;">
          <!-- <a class="sl_duba" target="_blank" href="http://www.duba.com">金山毒霸</a> -->
          <span style="color:#25c47a;display:none;" id="translating_id">
          翻译中<b id="percent_id">1</b>%&nbsp;&nbsp;<img src="images/5-121204194113-50.gif">
          </span>
          <span class="content2" id="show_source_button" style="display:none;">
          查看原文
          </span>
           <span class="content" id="show_button">
          翻译
          </span>
           <span class="content2" id="op_select_word">
          开启划词
          </span>
          <a id="person_trans_id" target="_blank" >人工翻译</a>
          <a id="faq_id" target="_blank" >FAQ</a>
          <a  id="content_config"><img src="images/config.png"></a>
        </div>
      </div>
      <div class="s_close">
        <a id="closePlu" class="closePlu"></a>
      </div>
    </div>
  </div>
  <script type="text/javascript" src="js/contenthtml_bind_event.js" charset="utf-8"></script>
</body>
</html>
